<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <h2>电话: {{ tel }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template> 

<script lang="ts">
import { ref } from 'vue'
export default {
  name: 'Person',
  // data () {
  //   return {
  //     name: '张三',
  //     age: 18,
  //     tel: '138421412'
  //   }
  // },
  // methods: {
  //   showTel () {
  //     alert(this.tel)
  //   },
  //   changeName () {
  //     this.name = 'zhangsan'
  //   },
  //   changeAge () {
  //     this.age+=1
  //   }
  // },
  setup () {
    // 在beforeCreate之前执行
    console.log(this) // undefined

    let name = ref<string>('张三')
    let age = ref<number>(18)
    let tel = ref('13812312321')

    const changeName = () => {
      name.value = 'zhangsan'
    }

    const changeAge = () => {
      age.value += 1
    }

    const showTel = () => {
      alert(tel.value)
    }


    return {
      name,
      age,
      tel,
      changeName,
      changeAge,
      showTel
    }
    // setup的返回值也可以是一个渲染函数
    // return () => '哈啊'
  }
}
</script>

<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>